{% extends "common/panel.html" %}
{% block title %}{{title}}{% endblock %}

{% block panel %}

<script type="text/javascript" charset="utf-8">
    madrona.onShow(function(){
        madrona.setupForm($('#featureform'));
        is_spatial = "{{is_spatial}}";
        var max_step = 2;
        
        if (is_spatial == "True") {
            var step = 1;
        } else {
            var step = max_step;
            $('#button_prev').hide();
            $('#button_next').hide();
        }
        
        function validate(step) {
            return_value = true;
            if (step == 1) {
            
            } else if (step == max_step) {
            
            } 
            return return_value;
        }; 

        function wizard(action) {
            if (step == 1 && action == 'next') {
                if (validate(step)) {
                    step += 1;
                }
            } else if (step > 1 && action == 'prev') {
                step -= 1;
            }
            $('div.step').each(function(index) {
                $(this).hide();
            });
            $('div#step' + step).show();

            if (step == 1) {
                $('#button_prev').hide();
                $('#button_submit').hide();
            } else {
                $('#button_prev').show();
            }

            if (step == max_step) {
                $('#button_next').hide();
                $('.submit_button').show();
            } else {
                $('#button_next').show();
                $('.submit_button').hide();
            }
        };
        
        $('#button_prev').click( function() { wizard('prev'); });
        $('#button_next').click( function() { wizard('next'); });
        //$('.submit_button').click( function() { wizard('submit'); });
        if (is_spatial == "True") {
            wizard();
        }
        
        
    });
</script>

{% if form.media %} {{ form.media }} {% endif %}

<h1>
    <img src="/media/wmm/img/aoi.png"/>
    <small>New Area of Interest (AOI) </small> 
</h1>

{% if is_spatial %} 

    <div class="step" id="step1" style="padding-bottom: 40px;">
        <p class="step-text"><i>Step 1 of 2 </i>
        <div id="PanelGeometry"></div>
    </div>
     
    <div class="step" id="step2">
        <p class="step-text"><i>Step 2 of 2 </i> 
        <div id="PanelAttributes">
            
{% endif %}

{% if form.is_multipart %}
    <form id="featureform" enctype="multipart/form-data" action="{{action}}" method="post">
        <input type='hidden' name='MAX_FILE_SIZE' value="10485760" /> <!-- 10 MB upload limit -->
{% else %}
    <form id="featureform" action="{{action}}" method="post"> 
{% endif %}
{% if json %}
        <div style="display:none;" class="json">{{json}}</div>
{% endif %}
    <p class="instructions">Provide a name to identify your Area: </p>
{% for field in form.visible_fields %}
    <div class="field{% if field.field.required %} required{% endif %}">
        {# Include the hidden fields in the form #}
        {% if forloop.first %}
            {% for hidden in form.hidden_fields %}
            <div style="display:none;">
                {{ hidden.errors }}
                {{ hidden }}
            </div>
            {% endfor %}
        {% endif %}

        {{ field.label_tag }}
        {{ field.errors }}
        {% if field.help_text %}
            <p class="help_text">
                {{ field.help_text|safe }}            
            </p>            
        {% endif %}
        {{ field }}            
    </div>
{% endfor %}
<p><input type="submit" value="submit"></p>
</form>

{% if is_spatial %}
        </div>
    </div>
{% endif %}

        
<div class="wizard_nav" style="width:100%">
    <a href="#" class="button" style="float:left;" onclick="this.blur(); return false;" id="button_prev"><span>&lt; Previous</span></a>
    <a href="#" class="button" style="float:right;" onclick="this.blur(); return false;" id="button_next"><span>Next &gt;</span></a>
</div>

<div>
    <a href="#" class="cancel_button button red" onclick="this.blur(); return false;"><span>Cancel</span></a>
    <a href="#" class="submit_button button" onclick="this.blur(); return false;" id="button_submit"><span>Submit</span></a>
</div>

<style type="text/css">

div .field > label { font-size: 12px; display: inline; }
div .step { 
    -moz-box-shadow: 5px 5px 5px #ddd;
    -webkit-box-shadow: 5px 5px 5px #ddd;
    box-shadow: 5px 5px 5px #ddd; 
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
    border: 1px #ddd solid;
    padding: 6px;
    margin-top: 4px;
    margin-bottom: 8px;
    background-color: white; 
    background-repeat: no-repeat;
    min-height: 54px;
}
span.form-image { float: left; margin-left: -66px; }
span.form-image > img { width:46px; height:46px; }


label {
    clear: both;
    color: #344E63;
    display: block;
    font-size: 12px;
    font-weight: normal;
    margin: 0 0 5px;
    padding: 0;
    text-shadow: 0 1px 0 #FCFAFF;
}
p.step-text {
    margin: 0px;
    text-align:left;
}
p.instructions {
    margin: 0px; 
    margin-top: 10px;
    margin-bottom: 0px;
    text-align: left;
    color: #47556C;
    font-size: 14px;
    font-weight: normal;
    font-family: sans-serif;
}

textarea {
    margin-top: 5px !important;
    margin-left: 0px !important;
}
</style>

{% endblock %}
